<template>
  <view class="search">
    <!-- input 框 -->
    <view class="search_constnt">
      <!-- 搜索 -->
      <view class="search_left">
        <view class="iconfont icon-RectangleCopy serach_icon"></view>
        <input v-model="seekContent" type="text" placeholder="请输入商品名" />
      </view>
      <!-- 按钮 -->
      <view @click="chandlerSearch" class="seach_right">搜索</view>
    </view>
    <!-- 推荐 -->
    <view v-if="searchList.length === 0" class="recommend">猜你想搜</view>
    <view v-if="searchList.length === 0">
      <view class="search_result" v-for="(item, index) in custom" :key="index">
        <view class="result_img"
          ><image :src="item.image_src" mode=""></image
        ></view>
        <view class="result_describe">{{ item.constnt }}</view>
      </view>
    </view>

    <!-- 搜索结果 -->
    <view
      class="search_result"
      v-for="(item, index) in searchList"
      :key="index"
      @click="aa(item.goods_id)"
    >
      <view class="result_img">
        <image
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606749033415&di=e5588241eeb3b851e625ec445050ce84&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F14%2F20161214221249_cCF4z.jpeg"
          mode=""
        ></image>
      </view>
      <view class="result_describe">{{ item.goods_name }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      seekContent: "", // 绑定输入框输入的值
      searchList: [], // 搜索到的数据
      // 之定义的数组 随便玩玩
      custom: [
        {
          constnt:
            "比如像上图的自问自答式，搭配得当的话会产生好笑又有趣的效果别人一看头像，便知晓你是个万里挑一的沙雕，浑身是笑点的逗比",
          image_src:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606749033415&di=e5588241eeb3b851e625ec445050ce84&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F14%2F20161214221249_cCF4z.jpeg",
        },
        {
          constnt:
            "比如像上图的自问自答式，搭配得当的话会产生好笑又有趣的效果别人一看头像，便知晓你是个万里挑一的沙雕，浑身是笑点的逗比",
          image_src:
            "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1220612432,2572868297&fm=26&gp=0.jpg",
        },
        {
          constnt:
            "比如像上图的自问自答式，搭配得当的话会产生好笑又有趣的效果别人一看头像，便知晓你是个万里挑一的沙雕，浑身是笑点的逗比",
          image_src:
            " https://paimgcdn.baidu.com/93E0E7DD90371120?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F4234132488.jpg&rz=urar_2_750_750&v=0",
        },
        {
          constnt:
            "比如像上图的自问自答式，搭配得当的话会产生好笑又有趣的效果别人一看头像，便知晓你是个万里挑一的沙雕，浑身是笑点的逗比",
          image_src:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606751522613&di=4ec14571ca7639500cd4de691d88fdea&imgtype=0&src=http%3A%2F%2Fpic3.zhimg.com%2F50%2Fv2-6f1c492cbdfe3c24aae44e935a796d5a_hd.jpg",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    // 发送请求
    async chandlerSearch() {
      const [error, res] = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch",
        data: { query: this.seekContent },
      });
      this.searchList = res.data.message;
    },
    aa(goods_id) {
      console.log(goods_id);
      uni.navigateTo({
        url: "/pages/goods_detail/index?goods_id=" + goods_id,
      });
    },
  },
};
</script>

<style lang="less">
.search {
  .recommend {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25rpx;
    color: #666;
  }
  .search_constnt {
    height: 61rpx;
    display: flex;
    margin: 15rpx 18rpx;
    .search_left {
      width: 599rpx;
      background: #e7e7e7;
      border-radius: 30rpx;
      align-items: center;
      display: flex;
      .serach_icon {
        height: 29rpx;
        width: 29rpx;
        margin: 0 15rpx;
      }
      input {
        font-size: 25rpx;
      }
    }
    .seach_right {
      width: 100rpx;
      height: 61rpx;
      background: #ea4350;
      color: #fff;
      border-radius: 10rpx;
      text-align: center;
      line-height: 61rpx;
      font-size: 25rpx;
      margin-left: 15rpx;
    }
  }
  .search_result {
    height: 209rpx;
    padding: 9rpx;
    margin: 26rpx;

    display: flex;
    .result_img {
      height: 190rpx;
      width: 190rpx;
      margin-right: 26rpx;
      image {
        height: 190rpx;
        width: 190rpx;
      }
    }
    .result_describe {
      font-size: 24rpx;
      widows: 460rpx;
      height: 66rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      color: #666;
    }
  }
}
</style>
